<template>
  <div class="store">
    <Header title="店铺"></Header>
    <div>
      <img src="@/assets/images/yuna.jpg" class="image" alt="" />
    </div>
    <!-- 店铺主体 -->
    <div class="main">
      <div class="foodsort">
        <div class="title">{{ data.title }}</div>
        <img :src="data.image" alt="" />
      </div>
      <van-tabs color="#ffc400">
        <van-tab
          v-for="(item, index) in data.storeData"
          :key="index"
          :title="item.name"
        >
          <FoodList :index="index" :FoodData="item.data" />
        </van-tab>
      </van-tabs>
    </div>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" />
      <van-action-bar-icon
        icon="cart-o"
        text="购物车"
        :badge="store.state.cartList.length"
        @click="toCart"
      />
      <van-action-bar-button
        type="warning"
        text="加入购物车"
        @click="handleAddCart"
      />
      <van-action-bar-button type="danger" text="立即购买" @click="goBuy" />
    </van-action-bar>
  </div>
</template>

<script setup>
import { showToast } from "vant";
import Header from "@/components/Header.vue";
import FoodList from "./components/FoodList.vue";
import { reactive, toRefs, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
// import { getStoreData } from "@/api/api";
const store = useStore();
const router = useRouter();
let data = reactive({
  title: "鱼拿酸菜鱼",
  image:
    "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
  storeData: [
    {
      name: "点菜",
      data: {
        content: "点菜",
        items: [
          {
            text: "热销套餐",
            children: [
              {
                pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.cfcy168.com%2FUploadFiles%2F2020%2F2%2F15904074889874037.jpg&refer=http%3A%2F%2Fwww.cfcy168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645421933&t=66b58fbba9dce6f6b397e38820de24dc",
                title: "隆江猪脚饭",
                num: 0,
                price: 25.0,
                id: 0,
                add: true,
              },
              {
                pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.cfcy168.com%2FUploadFiles%2F2020%2F2%2F15904074889874037.jpg&refer=http%3A%2F%2Fwww.cfcy168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645421933&t=66b58fbba9dce6f6b397e38820de24dc",
                title: "隆江猪脚饭",
                num: 0,
                price: 25.0,
                id: 1,
                add: true,
              },
            ],
          },
          {
            text: "超级折扣",
            children: [
              {
                pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
                title: "无骨酸菜鱼+肥牛双拼",
                num: 0,
                price: 25.0,
                id: 5,
                add: true,
              },
              {
                pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
                title: "香辣水煮鱼+肥牛双拼",
                num: 0,
                price: 25.0,
                id: 6,
                add: true,
              },
            ],
          },
        ],
      },
    },
    {
      name: "评价",
      data: {
        content: "评价",
      },
    },
    {
      name: "商家",
      data: {
        content: "商家",
      },
    },
  ],
});

// const getData = () => {
//   getStoreData().then((res) => {
//     console.log(res);
//     data.storeData = res;
//   });
// };
// onMounted(() => {
//   getData();
// });

// 处理加入购物车逻辑
function handleAddCart(type) {
  const newList = store.state.cartList || [];
  data.storeData.forEach((item) => {
    item.data.items?.forEach((item) => {
      item.children.forEach((item) => {
        if (item.num > 0) {
          newList.push(item);
        }
      });
    });
  });
  if (newList.length === 0) {
    // debugger;
    showToast("请选择商品");
    return;
  }
  store.commit("ADDCART", newList);
  type === "buy" ? toCart() : "";
}
// 去购物车
function toCart() {
  router.push("/cart");
}
// 立即购买
function goBuy() {
  // handleAddCart("buy");
  toCart();
}
</script>

<style lang="less" scoped>
.image {
  width: 100%;
}
.main {
  background: #fff;
  position: fixed;
  width: 100%;
  margin-top: -50px;
  border-radius: 15px;
  height: 300px;
  .foodsort {
    padding: 0 15px;
    margin-top: -15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    img {
      width: 80px;
      height: 80px;
      border-radius: 15px;
    }
  }
}
</style>
